<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 7.3.0">

  <link rel="apple-touch-icon" sizes="180x180" href="/img/iconfont.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/img/iconfont.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/img/iconfont.png">
  <link rel="mask-icon" href="/img/iconfont.png" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" integrity="sha256-VHqXKFhhMxcpubYf9xiWdCiojEbY9NexQ4jh8AxbvcM=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"wang-weijun.github.io","root":"/","images":"/images","scheme":"Pisces","darkmode":true,"version":"8.26.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12},"hljswrap":true,"codeblock":{"theme":{"light":"default","dark":"stackoverflow-dark"},"prism":{"light":"prism","dark":"prism-dark"},"copy_button":{"enable":false,"style":null},"fold":{"enable":false,"height":500},"language":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"duration":200,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.json","localsearch":{"enable":true,"top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js" defer></script>

    <meta name="description" content="Vue3与Uni-App的使用教程">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue与Uni-APP教程">
<meta property="og:url" content="http://wang-weijun.github.io/2023/10/18/Vue/index.html">
<meta property="og:site_name" content="Phils的杂货铺">
<meta property="og:description" content="Vue3与Uni-App的使用教程">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://wang-weijun.github.io/images/202311071457821.png">
<meta property="og:image" content="http://wang-weijun.github.io/images/202401251832316.png">
<meta property="og:image" content="http://wang-weijun.github.io/images/202401251838348.png">
<meta property="og:image" content="http://wang-weijun.github.io/images/202311061558521.png">
<meta property="og:image" content="http://wang-weijun.github.io/images/202311071025948.png">
<meta property="og:image" content="http://wang-weijun.github.io/images/202406170257129.png">
<meta property="og:image" content="http://wang-weijun.github.io/images/202407212253830.jpeg">
<meta property="article:published_time" content="2023-10-18T07:35:13.000Z">
<meta property="article:modified_time" content="2025-11-21T08:58:26.677Z">
<meta property="article:author" content="Phils">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://wang-weijun.github.io/images/202311071457821.png">


<link rel="canonical" href="http://wang-weijun.github.io/2023/10/18/Vue/">


<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://wang-weijun.github.io/2023/10/18/Vue/","path":"2023/10/18/Vue/","title":"Vue与Uni-APP教程"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Vue与Uni-APP教程 | Phils的杂货铺</title>
  








  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous" defer></script>
<script src="/js/utils.js" defer></script><script src="/js/motion.js" defer></script><script src="/js/sidebar.js" defer></script><script src="/js/next-boot.js" defer></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.5.0/search.js" integrity="sha256-xFC6PJ82SL9b3WkGjFavNiA9gm5z6UBxWPiu4CYjptg=" crossorigin="anonymous" defer></script>
<script src="/js/third-party/search/local-search.js" defer></script>







  





  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">Phils的杂货铺</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
      <div class="search-header">
        <span class="search-icon">
          <i class="fa fa-search"></i>
        </span>
        <div class="search-input-container">
          <input autocomplete="off" autocapitalize="off" maxlength="80"
                placeholder="搜索..." spellcheck="false"
                type="search" class="search-input">
        </div>
        <span class="popup-btn-close" role="button">
          <i class="fa fa-times-circle"></i>
        </span>
      </div>
      <div class="search-result-container">
        <div class="search-result-icon">
          <i class="fa fa-spinner fa-pulse fa-5x"></i>
        </div>
      </div>
    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#ES6%E8%AF%AD%E6%B3%95"><span class="nav-number">1.</span> <span class="nav-text">ES6语法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Promise%E8%AF%AD%E6%B3%95"><span class="nav-number">1.1.</span> <span class="nav-text">Promise语法</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0"><span class="nav-number">1.1.1.</span> <span class="nav-text">回调函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFpromise"><span class="nav-number">1.1.2.</span> <span class="nav-text">什么是promise</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#await-async%E5%BC%82%E6%AD%A5%E5%A4%84%E7%90%86%E5%90%8C%E6%AD%A5%E5%8C%96"><span class="nav-number">1.1.3.</span> <span class="nav-text">await&#x2F;async异步处理同步化</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue3"><span class="nav-number">2.</span> <span class="nav-text">Vue3</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A1%B9%E7%9B%AE%E5%88%9D%E5%A7%8B%E5%8C%96"><span class="nav-number">2.1.</span> <span class="nav-text">项目初始化</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%90%AD%E5%BB%BA%E8%84%9A%E6%89%8B%E6%9E%B6"><span class="nav-number">2.1.1.</span> <span class="nav-text">搭建脚手架</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A1%B9%E7%9B%AE%E7%9B%AE%E5%BD%95"><span class="nav-number">2.1.2.</span> <span class="nav-text">项目目录</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8F%92%E4%BB%B6"><span class="nav-number">2.1.3.</span> <span class="nav-text">插件</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue-router"><span class="nav-number">2.2.</span> <span class="nav-text">vue-router</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%95%E5%85%A5vue-router"><span class="nav-number">2.2.1.</span> <span class="nav-text">引入vue-router</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E5%99%A8%E5%B7%A5%E4%BD%9C%E6%A8%A1%E5%BC%8F"><span class="nav-number">2.2.2.</span> <span class="nav-text">路由器工作模式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1-to%E7%9A%84%E4%B8%A4%E7%A7%8D%E5%86%99%E6%B3%95"><span class="nav-number">2.2.3.</span> <span class="nav-text">路由_to的两种写法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82"><span class="nav-number">2.2.4.</span> <span class="nav-text">路由传参</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#props%E9%85%8D%E7%BD%AE"><span class="nav-number">2.2.5.</span> <span class="nav-text">props配置</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#replace%E5%B1%9E%E6%80%A7"><span class="nav-number">2.2.6.</span> <span class="nav-text">replace属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA"><span class="nav-number">2.2.7.</span> <span class="nav-text">编程式路由导航</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%87%8D%E5%AE%9A%E5%90%91"><span class="nav-number">2.2.8.</span> <span class="nav-text">重定向</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Pinia"><span class="nav-number">2.3.</span> <span class="nav-text">Pinia</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%90%AD%E5%BB%BApinia%E7%8E%AF%E5%A2%83"><span class="nav-number">2.3.1.</span> <span class="nav-text">搭建pinia环境</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AD%98%E5%82%A8-%E8%AF%BB%E5%8F%96%E6%95%B0%E6%8D%AE"><span class="nav-number">2.3.2.</span> <span class="nav-text">存储+读取数据</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BF%AE%E6%94%B9%E6%95%B0%E6%8D%AE-3%E7%A7%8D%E6%96%B9%E5%BC%8F"><span class="nav-number">2.3.3.</span> <span class="nav-text">修改数据(3种方式)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#getters%E4%BD%BF%E7%94%A8"><span class="nav-number">2.3.4.</span> <span class="nav-text">getters使用</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#subscribe%E4%BD%BF%E7%94%A8"><span class="nav-number">2.3.5.</span> <span class="nav-text">$subscribe使用</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Store%E7%9A%84%E7%BB%84%E5%90%88%E5%BC%8F"><span class="nav-number">2.3.6.</span> <span class="nav-text">Store的组合式</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1"><span class="nav-number">2.4.</span> <span class="nav-text">组件通信</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%80%90props%E3%80%91"><span class="nav-number">2.4.1.</span> <span class="nav-text">【props】</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%80%90%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%E3%80%91"><span class="nav-number">2.4.2.</span> <span class="nav-text">【自定义事件】</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%80%90mitt%E3%80%91"><span class="nav-number">2.4.3.</span> <span class="nav-text">【mitt】</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Uni-App"><span class="nav-number">3.</span> <span class="nav-text">Uni-App</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%95%E5%85%A5%E6%8F%92%E4%BB%B6"><span class="nav-number">3.1.</span> <span class="nav-text">引入插件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%91%E5%AD%98%E5%82%A8"><span class="nav-number">3.2.</span> <span class="nav-text">云存储</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A1%B5%E9%9D%A2%E9%97%B4%E4%BC%A0%E5%80%BC"><span class="nav-number">3.3.</span> <span class="nav-text">页面间传值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%84%E7%A7%8D%E4%BA%8B%E4%BB%B6"><span class="nav-number">3.4.</span> <span class="nav-text">各种事件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0"><span class="nav-number">3.4.1.</span> <span class="nav-text">下拉刷新</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A7%A6%E5%BA%95%E4%BA%8B%E4%BB%B6"><span class="nav-number">3.4.2.</span> <span class="nav-text">触底事件</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Uni-App-TS"><span class="nav-number">4.</span> <span class="nav-text">Uni-App-TS</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE"><span class="nav-number">4.1.</span> <span class="nav-text">创建项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%94%A8VS-Code%E5%BC%80%E5%8F%91"><span class="nav-number">4.2.</span> <span class="nav-text">用VS Code开发</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AE%89%E8%A3%85uni-app-%E6%8F%92%E4%BB%B6"><span class="nav-number">4.2.1.</span> <span class="nav-text">安装uni-app 插件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#TS%E7%B1%BB%E5%9E%8B%E6%A0%A1%E9%AA%8C"><span class="nav-number">4.2.2.</span> <span class="nav-text">TS类型校验</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#JSON-%E6%B3%A8%E9%87%8A%E9%97%AE%E9%A2%98"><span class="nav-number">4.2.3.</span> <span class="nav-text">JSON 注释问题</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85uni-ui%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="nav-number">4.3.</span> <span class="nav-text">安装uni-ui组件库</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%99%BB%E5%BD%95"><span class="nav-number">5.</span> <span class="nav-text">微信小程序登录</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Phils"
      src="/img/profile.png">
  <p class="site-author-name" itemprop="name">Phils</p>
  <div class="site-description" itemprop="description">个人博客，IT，技术分享</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">40</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">15</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">40</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <a href="https://github.com/wang-weijun" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;wang-weijun" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:1191206969@qq.com" title="E-Mail → mailto:1191206969@qq.com" rel="noopener me" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>

        </div>
      </div>
    </div>

    
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://wang-weijun.github.io/2023/10/18/Vue/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/img/profile.png">
      <meta itemprop="name" content="Phils">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Phils的杂货铺">
      <meta itemprop="description" content="个人博客，IT，技术分享">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="Vue与Uni-APP教程 | Phils的杂货铺">
      <meta itemprop="description" content="Vue3与Uni-App的使用教程">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Vue与Uni-APP教程
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2023-10-18 15:35:13" itemprop="dateCreated datePublished" datetime="2023-10-18T15:35:13+08:00">2023-10-18</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2025-11-21 16:58:26" itemprop="dateModified" datetime="2025-11-21T16:58:26+08:00">2025-11-21</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E9%AB%98%E7%BA%A7%E8%AF%AD%E8%A8%80/" itemprop="url" rel="index"><span itemprop="name">高级语言</span></a>
        </span>
    </span>

  
</div>

            <div class="post-description">Vue3与Uni-App的使用教程</div>
        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><h2 id="ES6语法"><a href="#ES6语法" class="headerlink" title="ES6语法"></a>ES6语法</h2><h3 id="Promise语法"><a href="#Promise语法" class="headerlink" title="Promise语法"></a>Promise语法</h3><h4 id="回调函数"><a href="#回调函数" class="headerlink" title="回调函数"></a>回调函数</h4><p>举例就以uniapp里面的网络请求uni.request()为例了，如果是微信小程序wx.request()也是一样的，还有jQuery的ajax()，这些都是异步请求，通过success回调函数获取数据的，而axios网络请求已经封装了promise了。</p>
<p>例如我们先要获取文章分类列表的id，再得到数据后，通过id获取该分类下的所有文章，再通过文章的id获取文章下的评论，最终获取该文章的所有评论：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">getData</span>(<span class="params"></span>) &#123;</span><br><span class="line"><span class="comment">//获取分类列表id</span></span><br><span class="line">uni.<span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&quot;https://ku.qingnian8.com/dataApi/news/navlist.php&quot;</span>,</span><br><span class="line">    <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">let</span> id = res.<span class="property">data</span>[<span class="number">0</span>].<span class="property">id</span></span><br><span class="line">        <span class="comment">// 根据分类id获取该分类下的所有文章</span></span><br><span class="line">        uni.<span class="title function_">request</span>(&#123;</span><br><span class="line">            <span class="attr">url</span>: <span class="string">&quot;https://ku.qingnian8.com/dataApi/news/newslist.php&quot;</span>,</span><br><span class="line">            <span class="attr">data</span>: &#123;</span><br><span class="line">                <span class="attr">cid</span>: id</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">success</span>: <span class="function"><span class="params">res2</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="comment">//获取到一篇文章的id，根据文章id找到该文章下的评论</span></span><br><span class="line">                <span class="keyword">let</span> id = res2.<span class="property">data</span>[<span class="number">0</span>].<span class="property">id</span>;</span><br><span class="line">                uni.<span class="title function_">request</span>(&#123;</span><br><span class="line">                    <span class="attr">url</span>: <span class="string">&quot;https://ku.qingnian8.com/dataApi/news/comment.php&quot;</span>,</span><br><span class="line">                    <span class="attr">data</span>: &#123;</span><br><span class="line">                        <span class="attr">aid</span>: id</span><br><span class="line">                    &#125;,</span><br><span class="line">                    <span class="attr">success</span>: <span class="function"><span class="params">res3</span> =&gt;</span> &#123;</span><br><span class="line">                        <span class="comment">//找到该文章下所有的评论</span></span><br><span class="line">                        <span class="variable language_">console</span>.<span class="title function_">log</span>(res3)</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>上面的代码，有多层嵌套，出现多个success回调，按照这样写的话，可维护、可读性很差，下面开始改造：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">onLoad</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">getNav</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;,</span><br><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="title function_">getNav</span>(<span class="params">callback</span>) &#123;</span><br><span class="line">        uni.<span class="title function_">request</span>(&#123;</span><br><span class="line">            <span class="attr">url</span>: <span class="string">&quot;https://ku.qingnian8.com/dataApi/news/navlist.php&quot;</span>,</span><br><span class="line">            <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="title function_">callback</span>(res)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>我们在<code>getNav()</code>中可以传一个回调函数<code>callback</code>，将请求的结果调用回调<code>callback(res)</code>，下面全部改写回调函数：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">onLoad</span>(<span class="params"></span>) &#123;</span><br><span class="line">	<span class="comment">// 调用获取导航列表后，将结果调用其他函数时，额外传入一个回调函数</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">getNav</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">let</span> id = res.<span class="property">data</span>[<span class="number">0</span>].<span class="property">id</span>;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">getList</span>(id, <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">let</span> id = res.<span class="property">data</span>[<span class="number">0</span>].<span class="property">id</span>;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="title function_">getComment</span>(id, <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// 获取导航列表</span></span><br><span class="line">    <span class="title function_">getNav</span>(<span class="params">callback</span>) &#123;</span><br><span class="line">        uni.<span class="title function_">request</span>(&#123;</span><br><span class="line">            <span class="attr">url</span>: <span class="string">&quot;https://ku.qingnian8.com/dataApi/news/navlist.php&quot;</span>,</span><br><span class="line">            <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="title function_">callback</span>(res)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 获取新闻列表</span></span><br><span class="line">    <span class="title function_">getList</span>(<span class="params">id, callback</span>) &#123;</span><br><span class="line">        uni.<span class="title function_">request</span>(&#123;</span><br><span class="line">            <span class="attr">url</span>: <span class="string">&quot;https://ku.qingnian8.com/dataApi/news/newslist.php&quot;</span>,</span><br><span class="line">            <span class="attr">data</span>: &#123;</span><br><span class="line">                <span class="attr">cid</span>: <span class="number">51</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="title function_">callback</span>(res);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 获取当前新闻的评论</span></span><br><span class="line">    <span class="title function_">getComment</span>(<span class="params">id, callback</span>) &#123;</span><br><span class="line">        uni.<span class="title function_">request</span>(&#123;</span><br><span class="line">            <span class="attr">url</span>: <span class="string">&quot;https://ku.qingnian8.com/dataApi/news/comment.php&quot;</span>,</span><br><span class="line">            <span class="attr">data</span>: &#123;</span><br><span class="line">                <span class="attr">aid</span>: id</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="title function_">callback</span>(res);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这样的话仔细看来，并没有解决回调地狱的问题，还是回调里面嵌套回调，只是把函数独立出来了，看着清晰条理了一些而已，但是维护难度还是有的，所以随着ES6的普及，这种方案逐渐边缘化，取而代之的就是promise方案了。</p>
<h4 id="什么是promise"><a href="#什么是promise" class="headerlink" title="什么是promise"></a>什么是promise</h4><p>promise是解决异步的方法，本质上是一个构造函数，可以用它实例化一个对象。对象身上有resolve、reject、all，原型上有then、catch方法。promise对象有三种状态：pending（初识状态&#x2F;进行中）、resolved或fulfilled（成功）、rejected（失败）</p>
<ol>
<li>pending。它的意思是 “待定的，将发生的”，相当于是一个初始状态。创建Promise对象时，且没有调用resolve或者是reject方法，相当于是初始状态。这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。 </li>
<li>resolved。表示解决了，就是说这个承诺实现了。 要实现从pending到resolved的转变，需要在 创建Promise对象时，在函数体中调用了resolve方法</li>
<li>rejected。拒绝，失败。表示这个承诺没有做到，失败了。要实现从pending到rejected的转换，只需要在创建Promise对象时，调用reject函数。</li>
</ol>
<p>通过代码打印<code>promise</code>的方法：</p>
<blockquote>
<p>console.dir(Promise)</p>
</blockquote>
<p><img src="/../images/202311071457821.png" alt="image-20231107145707785"></p>
<hr>
<p>使用Promise进行改造：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">onLoad</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">getNav</span>().<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;,</span><br><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// 获取导航列表</span></span><br><span class="line">    <span class="title function_">getNav</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123; <span class="comment">// 返回promise对象</span></span><br><span class="line">            uni.<span class="title function_">request</span>(&#123;</span><br><span class="line">                <span class="attr">url</span>: <span class="string">&quot;https://ku.qingnian8.com/dataApi/news/navlist.php&quot;</span>,</span><br><span class="line">                <span class="attr">success</span>: <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                    <span class="title function_">resolve</span>(res);</span><br><span class="line">                &#125;,</span><br><span class="line">                <span class="attr">fail</span>: <span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">                    <span class="title function_">reject</span>(err);</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>最后的调用变为了.then的链式调用：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//promise链式调用</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="title function_">getNav</span>().<span class="title function_">then</span>(<span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> id=res.<span class="property">data</span>[<span class="number">0</span>].<span class="property">id</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">getArticle</span>(id);</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> id=res.<span class="property">data</span>[<span class="number">0</span>].<span class="property">id</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">getComment</span>(id);</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line">&#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(err);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>如果想要等待所有请求全部加载完成再响应，可以使用：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">onLoad</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> p1 = <span class="variable language_">this</span>.<span class="title function_">getNav</span>();</span><br><span class="line">    <span class="keyword">let</span> p2 = <span class="variable language_">this</span>.<span class="title function_">getArticle</span>();</span><br><span class="line">    <span class="keyword">let</span> p3 = <span class="variable language_">this</span>.<span class="title function_">getComment</span>();</span><br><span class="line">    <span class="title class_">Promise</span>.<span class="title function_">all</span>([p1, p2, p3]).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">    	<span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="await-async异步处理同步化"><a href="#await-async异步处理同步化" class="headerlink" title="await&#x2F;async异步处理同步化"></a>await&#x2F;async异步处理同步化</h4><p>这两个命令是成对出现的，如果使用await没有在函数中使用async命令，那就会报错，如果直接使用async没有使用await不会报错，只是返回的函数是个promise，可以，但是没有意义，所以这两个一起使用才会发挥出它们本身重要的作用。</p>
<p>这两个命令怎么用那，还是通过上面的案例，来该着一下then的链式调用代码。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">async onLoad() &#123;</span><br><span class="line">    let id, res;</span><br><span class="line">    res = await this.getNav();</span><br><span class="line">    id = res.data[0].id;</span><br><span class="line">    res = await this.getArticle(id);</span><br><span class="line">    id = res.data[0].id;</span><br><span class="line">    res = await this.getComment(id);</span><br><span class="line">    console.log(res)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>以上代码就是最终的改造版了，可以看到onload是函数，这个函数必须有async命令，在调用函数的部分，前面都加了一个await，这个命令的意思就是等这一行的异步方法执行成功后，将返回的值赋值给res变量，然后才能再走下一行代码，这就是将原来的异步编程改为了同步编程，这就是标题提到的“异步处理，同步化”。</p>
<hr>
<p>总结：如果涉及到网络请求没有依赖关系的话，异步请求是效率最高的，但是下一个的方法依赖于上一个网络请求的结果，那么久必须使用await命令，将异步结果等待返回之后再执行后面的代码。</p>
<h2 id="Vue3"><a href="#Vue3" class="headerlink" title="Vue3"></a>Vue3</h2><h3 id="项目初始化"><a href="#项目初始化" class="headerlink" title="项目初始化"></a>项目初始化</h3><h4 id="搭建脚手架"><a href="#搭建脚手架" class="headerlink" title="搭建脚手架"></a>搭建脚手架</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm create vue@latest</span><br></pre></td></tr></table></figure>

<p>然后根据自己需要进行脚手架的设置：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">D:\我的文件\Desktop&gt;npm create vue@latest</span><br><span class="line"></span><br><span class="line">Vue.js - The Progressive JavaScript Framework</span><br><span class="line"></span><br><span class="line">√ 请输入项目名称： ... vue3</span><br><span class="line">√ 是否使用 TypeScript 语法？ ... 否 / 是</span><br><span class="line">√ 是否启用 JSX 支持？ ... 否 / 是</span><br><span class="line">√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是</span><br><span class="line">√ 是否引入 Pinia 用于状态管理？ ... 否 / 是</span><br><span class="line">√ 是否引入 Vitest 用于单元测试？ ... 否 / 是</span><br><span class="line">√ 是否要引入一款端到端（End to End）测试工具？ » 不需要</span><br><span class="line">√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是</span><br><span class="line"></span><br><span class="line">正在构建项目 D:\我的文件\Desktop\vue3...</span><br><span class="line"></span><br><span class="line">项目构建完成，可执行以下命令：</span><br><span class="line"></span><br><span class="line">  <span class="built_in">cd</span> vue3</span><br><span class="line">  npm install</span><br><span class="line">  npm run dev</span><br></pre></td></tr></table></figure>

<h4 id="项目目录"><a href="#项目目录" class="headerlink" title="项目目录"></a>项目目录</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">.<span class="property">vscode</span>					--- <span class="title class_">VScode</span>工具的配置文件</span><br><span class="line">node_modules			--- <span class="title class_">Vue</span>项目的运行依赖文件夹</span><br><span class="line">public					--- 资源文件夹（浏览器图标）</span><br><span class="line">src						--- 源码文件夹</span><br><span class="line">.<span class="property">gitignore</span>				--- git忽略文件</span><br><span class="line">index.<span class="property">html</span>				--- rHTML文件</span><br><span class="line">package.<span class="property">json</span>			--- 信息描述文件</span><br><span class="line"><span class="variable constant_">README</span>.<span class="property">md</span>				--- 注释文件</span><br><span class="line">vite.<span class="property">config</span>.<span class="property">js</span>			--- <span class="title class_">Vue</span>配置文件</span><br></pre></td></tr></table></figure>

<h4 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h4><p>在官方推荐的编译器<code>VSode</code>中，安装<code>Volar</code>插件，用来支持Vue语法</p>
<p><img src="/../images/202401251832316.png" alt="image-20240125183202252"></p>
<p>还可以在这个插件中设置，在使用<strong>Ref</strong>数据使，自动添加**.value**</p>
<p>在<code>VScode</code>的设置中，选择：扩展 -&gt; Volar ，勾选&#x3D;&#x3D;自动输入value&#x3D;&#x3D;</p>
<p><img src="/../images/202401251838348.png" alt="image-20240125183851286"></p>
<h3 id="vue-router"><a href="#vue-router" class="headerlink" title="vue-router"></a>vue-router</h3><h4 id="引入vue-router"><a href="#引入vue-router" class="headerlink" title="引入vue-router"></a>引入vue-router</h4><p><strong>安装：</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue-router</span><br></pre></td></tr></table></figure>

<p><strong>使用:</strong></p>
<p>在<code>src</code>目录下，新建文件夹<code>router</code>，在<code>router</code>文件夹中新建文件<code>index.ts/index.js</code>，写入一下内容</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建一个路由器，暴露出去</span></span><br><span class="line"><span class="keyword">import</span> &#123; createRouter, createWebHistory &#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"><span class="comment">// 测试路由</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Home</span> <span class="keyword">from</span> <span class="string">&#x27;@/pages/Home.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>(&#123;</span><br><span class="line">  <span class="attr">history</span>: <span class="title function_">createWebHistory</span>(<span class="keyword">import</span>.<span class="property">meta</span>.<span class="property">env</span>.<span class="property">BASE_URL</span>), <span class="comment">// 路由器的工作模式</span></span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">      <span class="attr">component</span>: <span class="title class_">Home</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router</span><br></pre></td></tr></table></figure>

<p>在<code>main.ts/main.js</code>中引入：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span></span><br><span class="line">app.<span class="title function_">use</span>(router)</span><br></pre></td></tr></table></figure>

<p>在组件中可以使用这种方式：RouterLink为路由跳转，RouterView为不同路由的显示</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 导航区 --&gt;</span><br><span class="line">&lt;div class=&quot;navigate&quot;&gt;</span><br><span class="line">    &lt;RouterLink to=&quot;/home&quot; active-class=&quot;active&quot;&gt;首页&lt;/RouterLink&gt;</span><br><span class="line">    &lt;RouterLink to=&quot;/news&quot; active-class=&quot;active&quot;&gt;新闻&lt;/RouterLink&gt;</span><br><span class="line">    &lt;RouterLink to=&quot;/about&quot; active-class=&quot;active&quot;&gt;关于&lt;/RouterLink&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;!-- 展示区 --&gt;</span><br><span class="line">&lt;div class=&quot;main-content&quot;&gt;</span><br><span class="line">    &lt;RouterView /&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<h4 id="路由器工作模式"><a href="#路由器工作模式" class="headerlink" title="路由器工作模式"></a>路由器工作模式</h4><ol>
<li><p>history模式</p>
<blockquote>
<p>优点：<code>URL</code>更加美观，不带有<code>#</code>，更接近传统的网站<code>URL</code>。</p>
<p>缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404模式。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>(&#123;</span><br><span class="line">  <span class="attr">history</span>: <span class="title function_">createWebHistory</span>(), <span class="comment">// history模式</span></span><br><span class="line">  <span class="comment">/******/</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>hash模式</p>
<blockquote>
<p>优点：兼容性更好，因为不需要服务端处理路径。</p>
<p>缺点：<code>URL</code>带有<code>#</code>不太美观，且在<code>SEO</code>优化方面相对较差</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>(&#123;</span><br><span class="line">  <span class="attr">history</span>: <span class="title function_">createWebHashHistory</span>(), <span class="comment">// hash模式</span></span><br><span class="line">  <span class="comment">/******/</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></blockquote>
</li>
</ol>
<h4 id="路由-to的两种写法"><a href="#路由-to的两种写法" class="headerlink" title="路由_to的两种写法"></a>路由_to的两种写法</h4><ol>
<li><p>路径字符串方式</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;RouterLink to=&quot;/home&quot; active-class=&quot;active&quot;&gt;首页&lt;/RouterLink&gt;</span><br></pre></td></tr></table></figure>


</li>
<li><p>路径对象方式</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;RouterLink :to=&quot;&#123;path: &#x27;/homne&#x27;&#125;&quot; active-class=&quot;active&quot;&gt;首页&lt;/RouterLink&gt;</span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="路由传参"><a href="#路由传参" class="headerlink" title="路由传参"></a>路由传参</h4><p>路由传参可通过 <code>query</code>、<code>param</code></p>
<p><strong>query参数:</strong></p>
<p>直接通过路由传参：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link :to=&quot;`/news/detail?id=$&#123;news.id&#125;&amp;title=$&#123;news.title&#125;&amp;content=$&#123;news.content&#125;`&quot;&gt;</span><br><span class="line">    &#123;&#123; news.title &#125;&#125;</span><br><span class="line">&lt;/router-link&gt;</span><br></pre></td></tr></table></figure>

<p>在跳转到的路由组件中，使用<code>route</code>获取</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;ul class=&quot;news-list&quot;&gt;</span><br><span class="line">    &lt;li&gt;编号：&#123;&#123; route.query.id &#125;&#125;&lt;/li&gt;</span><br><span class="line">    &lt;li&gt;标题：&#123;&#123; route.query.title &#125;&#125;&lt;/li&gt;</span><br><span class="line">    &lt;li&gt;内容：&#123;&#123; route.query.content &#125;&#125;&lt;/li&gt;</span><br><span class="line">  &lt;/ul&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script setup lang=&quot;ts&quot; name=&quot;Detail&quot;&gt;</span><br><span class="line">import &#123;useRoute&#125; from &quot;vue-router&quot;;</span><br><span class="line">const route = useRoute();</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>优化写法:</p>
</blockquote>
<p>路由传参：将<strong>to</strong>使用对象写法，query中写参数</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link</span><br><span class="line">  :to=&quot;&#123;</span><br><span class="line">          path: `/news/detail`,</span><br><span class="line">          query: &#123;</span><br><span class="line">            id: news.id,</span><br><span class="line">            title: news.title,</span><br><span class="line">            content: news.content</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;&quot;</span><br><span class="line">        &gt;</span><br><span class="line">    &#123;&#123; news.title &#125;&#125;</span><br><span class="line">&lt;/router-link&gt;</span><br></pre></td></tr></table></figure>

<p>在跳转到的路由组件中，使用<code>route</code>获取</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;ul class=&quot;news-list&quot;&gt;</span><br><span class="line">    &lt;li&gt;编号：&#123;&#123; query.id &#125;&#125;&lt;/li&gt;</span><br><span class="line">    &lt;li&gt;标题：&#123;&#123; query.title &#125;&#125;&lt;/li&gt;</span><br><span class="line">    &lt;li&gt;内容：&#123;&#123; query.content &#125;&#125;&lt;/li&gt;</span><br><span class="line">  &lt;/ul&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script setup lang=&quot;ts&quot; name=&quot;Detail&quot;&gt;</span><br><span class="line">import &#123; toRefs &#125; from &quot;vue&quot;;</span><br><span class="line">import &#123;useRoute&#125; from &quot;vue-router&quot;;</span><br><span class="line">const route = useRoute();</span><br><span class="line">const &#123;query&#125; = toRefs(route);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>param参数:</strong></p>
<p>首先在路由配置页中，预留参数位：在子路由的<code>path</code>中写入<code>detail/:id/:title/:content</code></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">routes</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/news&#x27;</span>,</span><br><span class="line">      <span class="attr">component</span>: <span class="title class_">News</span>,</span><br><span class="line">      <span class="attr">children</span>: [</span><br><span class="line">          &#123;</span><br><span class="line">              <span class="attr">path</span>: <span class="string">&#x27;detail/:id/:title/:content&#x27;</span>,</span><br><span class="line">              <span class="attr">component</span>: <span class="title class_">Detail</span></span><br><span class="line">          &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<p>路由跳转：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link :to=&quot;`/news/detail/$&#123;news.id&#125;/$&#123;news.title&#125;/$&#123;news.content&#125;`&quot;&gt;</span><br><span class="line">    &#123;&#123; news.title &#125;&#125;</span><br><span class="line">&lt;/router-link&gt;</span><br></pre></td></tr></table></figure>

<p>路由接收：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;ul class=&quot;news-list&quot;&gt;</span><br><span class="line">    &lt;li&gt;编号：&#123;&#123; route.params.id &#125;&#125;&lt;/li&gt;</span><br><span class="line">    &lt;li&gt;标题：&#123;&#123; route.params.title &#125;&#125;&lt;/li&gt;</span><br><span class="line">    &lt;li&gt;内容：&#123;&#123; route.params.content &#125;&#125;&lt;/li&gt;</span><br><span class="line">  &lt;/ul&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script setup lang=&quot;ts&quot; name=&quot;Detail&quot;&gt;</span><br><span class="line">import &#123;useRoute&#125; from &quot;vue-router&quot;;</span><br><span class="line">const route = useRoute();</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>优化写法</p>
</blockquote>
<p>在路由配置页中，为路由设置名称</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">children</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;detail&#x27;</span>,</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;detail/:id/:title/:content&#x27;</span>,</span><br><span class="line">        <span class="attr">component</span>: <span class="title class_">Detail</span></span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<p>路由跳转: 且params中不可以传<code>对象</code>或<code>数组</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;RouterLink :to=&quot;&#123;</span><br><span class="line">  name: &#x27;detail&#x27;,</span><br><span class="line">  params: &#123;</span><br><span class="line">    id: news.id,</span><br><span class="line">    title: news.title,</span><br><span class="line">    content: news.content</span><br><span class="line">  &#125;</span><br><span class="line">&#125;&quot;&gt;</span><br><span class="line">  &#123;&#123; news.title&#125;&#125;</span><br><span class="line">&lt;/RouterLink&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>如果有些参数不是必要的，可以在路由配置页中，在该参数后面加一个<code>?</code></p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">children</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;detail&#x27;</span>,</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;detail/:id/:title/:content?&#x27;</span>,</span><br><span class="line">        <span class="attr">component</span>: <span class="title class_">Detail</span></span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<h4 id="props配置"><a href="#props配置" class="headerlink" title="props配置"></a>props配置</h4><p>为了简化在路由接收时，从<code>route</code>中取值的繁琐步骤，可在路由配置页，添加：<code>props: true</code></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">children</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;detail&#x27;</span>,</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;detail/:id/:title/:content&#x27;</span>,</span><br><span class="line">        <span class="attr">component</span>: <span class="title class_">Detail</span>,</span><br><span class="line">        <span class="attr">props</span>: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<p>此时，路由组件<code>&lt;Detail /&gt;</code>相当于变为了 <code>&lt;Detail id=? title=? content=? /&gt;</code>，将接收到的参数转化为<code>props</code></p>
<p>在路由接收页面就可以直接通过 <code>defineProps</code> 拿到参数：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;ul class=&quot;news-list&quot;&gt;</span><br><span class="line">    &lt;li&gt;编号：&#123;&#123; id &#125;&#125;&lt;/li&gt;</span><br><span class="line">    &lt;li&gt;标题：&#123;&#123; title &#125;&#125;&lt;/li&gt;</span><br><span class="line">    &lt;li&gt;内容：&#123;&#123; content &#125;&#125;&lt;/li&gt;</span><br><span class="line">  &lt;/ul&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script setup lang=&quot;ts&quot; name=&quot;Detail&quot;&gt;</span><br><span class="line">defineProps([&#x27;id&#x27;, &#x27;title&#x27;, &#x27;content&#x27;])</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>Props有三种写法，选择合适的写法</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;	</span><br><span class="line">	// 第一种写法：将路由收到的所有params参数作为props传给路由组件</span><br><span class="line">	props: true,</span><br><span class="line">	// 第二种写法：第二种写法：函数写法，可以自己决定将什么作为props传给路由组件</span><br><span class="line">    props(route)&#123;</span><br><span class="line">    	return route.query</span><br><span class="line">    &#125;</span><br><span class="line">	// 第三种写法：对象写法，可以自己决定将什么作为props传给路由组件</span><br><span class="line">    props: &#123;</span><br><span class="line">        id: 1,</span><br><span class="line">        title: &#x27;新闻标题&#x27;,</span><br><span class="line">        content: &#x27;新闻内容&#x27;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="replace属性"><a href="#replace属性" class="headerlink" title="replace属性"></a>replace属性</h4><ol>
<li><p>作用：控制路由跳转时操作浏览器历史记录的模式。</p>
</li>
<li><p>浏览器的历史记录有两种写入方式：分别为<code>push</code>和<code>replace</code>：</p>
<ul>
<li><code>push</code>是追加历史记录（默认值）。可在浏览器点击退后，返回之前路由</li>
<li><code>replace</code>是替换当前记录。无法回退之前路由，可用于登录页跳转</li>
</ul>
</li>
<li><p>开启<code>replace</code>模式：加入<code>replace</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;Router-link replace to=&quot;/home&quot;&gt;首页&lt;/Router-link&gt;</span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="编程式路由导航"><a href="#编程式路由导航" class="headerlink" title="编程式路由导航"></a>编程式路由导航</h4><p>编程式路由导航，为了脱离<code>&lt;RouterLink&gt;</code>实现路由跳转，我们只需要在组件种引入<code>useRouter</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">import &#123; useRouter &#125; from &quot;vue-router&quot;;</span><br><span class="line">const router = useRouter()</span><br><span class="line">// 此处 push 用法和路由 to 的用法一样，有两种，字符串和对象写法</span><br><span class="line">router.push(&#123;</span><br><span class="line">    name: &#x27;detail&#x27;,</span><br><span class="line">    params: &#123;</span><br><span class="line">      id: news.id,</span><br><span class="line">      title: news.title,</span><br><span class="line">      content: news.content</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>编程式路由可写在函数中，当满足条件进行跳转，例如登录跳转。</p>
<h4 id="重定向"><a href="#重定向" class="headerlink" title="重定向"></a>重定向</h4><p>使用<code>redirect</code>可重定向到指定路由</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">const router = createRouter(&#123;</span><br><span class="line">    history: createWebHistory(import.meta.env.BASE_URL), // 路由器的工作模式</span><br><span class="line">    routes: [</span><br><span class="line">        &#123;</span><br><span class="line">            path: &#x27;/home&#x27;,</span><br><span class="line">            component: Home</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            path: &#x27;/&#x27;,</span><br><span class="line">            redirect: &#x27;/home&#x27;</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="Pinia"><a href="#Pinia" class="headerlink" title="Pinia"></a>Pinia</h3><p>Vue的状态管理库</p>
<h4 id="搭建pinia环境"><a href="#搭建pinia环境" class="headerlink" title="搭建pinia环境"></a>搭建pinia环境</h4><p>安装<code>pinia</code></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i pinia</span><br></pre></td></tr></table></figure>

<p>在<code>main.ts/main.js</code>中引入pinia：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="comment">// 第一步：引入pinia</span></span><br><span class="line"><span class="keyword">import</span> &#123; createPinia &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>)</span><br><span class="line"><span class="comment">// 第二步：创建pinia</span></span><br><span class="line"><span class="keyword">const</span> pinia = <span class="title function_">createPinia</span>()</span><br><span class="line"><span class="comment">// 第三步：挂载pinia</span></span><br><span class="line">app.<span class="title function_">use</span>(pinia)</span><br><span class="line">app.<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h4 id="存储-读取数据"><a href="#存储-读取数据" class="headerlink" title="存储+读取数据"></a>存储+读取数据</h4><p>假如我们有一个组件叫<code>Count.vue</code>，我们需要存储一个数据为：<code>sum</code>，我们可以在项目路径中<code>@/src/store</code>中创建<code>count.ts</code>，写入</p>
<p><code>defineStore</code>需要一个<strong>id</strong>和<strong>对象</strong>，id我们使用组件名</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;defineStore&#125; <span class="keyword">from</span> <span class="string">&quot;pinia&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> useCountStore = <span class="title function_">defineStore</span>(<span class="string">&#x27;count&#x27;</span>, &#123;</span><br><span class="line">    <span class="comment">// 真正存储数据的地方</span></span><br><span class="line">    <span class="title function_">state</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">sum</span>: <span class="number">0</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>在组件<code>Count.vue</code>中使用时，我们先引入<code>count.ts</code>，在通过<code>count.ts</code>中暴露出的<code>useCountStore.sum</code>获取数据</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;useCountStore&#125; <span class="keyword">from</span> <span class="string">&quot;@/store/count&quot;</span></span><br><span class="line"><span class="keyword">const</span> countStore = <span class="title function_">useCountStore</span>()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 取数据</span></span><br><span class="line">countStore.<span class="property">sum</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>更方便的读取数据 <strong>storeToRefs</strong>,使用storeToRefs，只会关注store中的数据，不会对方法进行ref包裹</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;useCountStore&#125; <span class="keyword">from</span> <span class="string">&quot;@/store/count&quot;</span></span><br><span class="line"><span class="keyword">import</span> &#123;storeToRefs&#125; <span class="keyword">from</span> <span class="string">&quot;pinia&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> countStore = <span class="title function_">useCountStore</span>()</span><br><span class="line"><span class="keyword">const</span> &#123;sum, school, address&#125; = <span class="title function_">storeToRefs</span>(countStore)</span><br></pre></td></tr></table></figure>



<h4 id="修改数据-3种方式"><a href="#修改数据-3种方式" class="headerlink" title="修改数据(3种方式)"></a>修改数据(3种方式)</h4><p><strong>第一种</strong>修改方式，直接操作数据</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params"></span>) &#123;</span><br><span class="line">  countStore.<span class="property">sum</span> += <span class="number">1</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>第二种</strong>修改方式，批量变更，使用<code>$patch</code>可以进行批量数据修改，当批量数据变更时使用这种</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params"></span>) &#123;</span><br><span class="line">  countStore.$patch(&#123;</span><br><span class="line">    <span class="attr">sum</span>: countStore.<span class="property">sum</span> += n.<span class="property">value</span>,</span><br><span class="line">    <span class="attr">school</span>: <span class="string">&#x27;bjdx&#x27;</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>第三种</strong>修改方式，在<code>count.ts</code>中编写修改数据的行为，在<code>count.ts</code>中加入<strong>actions</strong>，在<strong>actions</strong>中编写修改行为，可复用</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;defineStore&#125; <span class="keyword">from</span> <span class="string">&quot;pinia&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> useCountStore = <span class="title function_">defineStore</span>(<span class="string">&#x27;count&#x27;</span>, &#123;</span><br><span class="line">    <span class="comment">// actions里面放置的是一个一个方法，用于响应组件的“动作”</span></span><br><span class="line">    <span class="attr">actions</span>: &#123;</span><br><span class="line">        <span class="title function_">increment</span>(<span class="params"><span class="attr">value</span>: <span class="built_in">number</span></span>) &#123;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">sum</span> += value <span class="comment">// 此处无法直接获取sum，需使用this.sum获取</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 真正存储数据的地方</span></span><br><span class="line">    <span class="title function_">state</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">sum</span>: <span class="number">0</span>,</span><br><span class="line">            <span class="attr">school</span>: <span class="string">&#x27;北京大学&#x27;</span>,</span><br><span class="line">            <span class="attr">address</span>: <span class="string">&#x27;北京市朝阳区芍药居&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>在<code>count.ts</code>组件中调用: 直接使用 <strong>countStore.方法</strong></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params"></span>) &#123;</span><br><span class="line">  countStore.<span class="title function_">increment</span>(n.<span class="property">value</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="getters使用"><a href="#getters使用" class="headerlink" title="getters使用"></a>getters使用</h4><p>在<code>count.ts</code>中，可以加入<strong>getters</strong>：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;defineStore&#125; <span class="keyword">from</span> <span class="string">&quot;pinia&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> useCountStore = <span class="title function_">defineStore</span>(<span class="string">&#x27;count&#x27;</span>, &#123;</span><br><span class="line">    <span class="comment">/******/</span>,</span><br><span class="line">    <span class="attr">getters</span>: &#123;</span><br><span class="line">        <span class="attr">bigSum</span>: <span class="function"><span class="params">state</span> =&gt;</span> state.<span class="property">sum</span> * <span class="number">10</span>,</span><br><span class="line">        <span class="title function_">upperSchool</span>(): <span class="built_in">string</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">school</span>.<span class="title function_">toUpperCase</span>()</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p><strong>使用时</strong>和state中的数据一样，推荐使用方法：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;useCountStore&#125; <span class="keyword">from</span> <span class="string">&quot;@/store/count&quot;</span></span><br><span class="line"><span class="keyword">import</span> &#123;storeToRefs&#125; <span class="keyword">from</span> <span class="string">&quot;pinia&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> countStore = <span class="title function_">useCountStore</span>()</span><br><span class="line"><span class="keyword">const</span> &#123;sum, school, address, bigSum, upperSchool&#125; = <span class="title function_">storeToRefs</span>(countStore)</span><br></pre></td></tr></table></figure>

<h4 id="subscribe使用"><a href="#subscribe使用" class="headerlink" title="$subscribe使用"></a>$subscribe使用</h4><p>$subscribe可以监视store中的数据变化，例如下面代码</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;useTalkStore&#125; <span class="keyword">from</span> <span class="string">&quot;@/store/loveTalk&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> talkStore = <span class="title function_">useTalkStore</span>()</span><br><span class="line">talkStore.$subscribe(<span class="function">(<span class="params">mutation, state</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(mutation)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(state)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>mutation: 提供关于状态更改操作的详细信息</p>
<p>state: 取到存储的当前最新的完整状态</p>
<h4 id="Store的组合式"><a href="#Store的组合式" class="headerlink" title="Store的组合式"></a>Store的组合式</h4><p>store还可以用组合式去书写，例如<code>loveTalk.ts</code></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;reactive&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> useTalkStore = <span class="title function_">defineStore</span>(<span class="string">&#x27;talk&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// talkList 就是 state</span></span><br><span class="line">    <span class="keyword">const</span> talkList = <span class="title function_">reactive</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;talkList&#x27;</span>) <span class="keyword">as</span> <span class="built_in">string</span>) || [])</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 函数 相当于action</span></span><br><span class="line">    <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">getAllTalk</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> &#123;<span class="attr">data</span>: &#123;<span class="attr">content</span>: title&#125;&#125; = <span class="keyword">await</span> axios.<span class="title function_">get</span>(<span class="string">&#x27;https://api.uomg.com/api/rand.qinghua?format=json&#x27;</span>)</span><br><span class="line">        <span class="keyword">let</span> obj = &#123;<span class="attr">id</span>: <span class="title function_">nanoid</span>(), <span class="attr">title</span>: title&#125;</span><br><span class="line">        talkList.<span class="title function_">unshift</span>(obj)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> &#123;talkList,getAllTalk&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<h3 id="组件通信"><a href="#组件通信" class="headerlink" title="组件通信"></a>组件通信</h3><h4 id="【props】"><a href="#【props】" class="headerlink" title="【props】"></a>【props】</h4><p>概述：<code>props</code>是使用频率最高的一种通信方式，常用于：<strong>父</strong> &lt;-&gt; <strong>子</strong></p>
<ul>
<li>若<strong>父传子</strong>：属性值是非函数</li>
<li>若<strong>子传父</strong>：属性值是函数</li>
</ul>
<p>首先我们创建一个父组件：<code>Father.vue</code></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>父组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">		<span class="tag">&lt;<span class="name">h4</span>&gt;</span>汽车：&#123;&#123; car &#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">		<span class="tag">&lt;<span class="name">h4</span> <span class="attr">v-show</span>=<span class="string">&quot;toy&quot;</span>&gt;</span>子给的玩具：&#123;&#123; toy &#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">		<span class="tag">&lt;<span class="name">Child</span> <span class="attr">:car</span>=<span class="string">&quot;car&quot;</span> <span class="attr">:sendToy</span>=<span class="string">&quot;getToy&quot;</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span> <span class="attr">name</span>=<span class="string">&quot;Father&quot;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">import</span> <span class="title class_">Child</span> <span class="keyword">from</span> <span class="string">&#x27;./Child.vue&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="comment">// 数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">let</span> car = <span class="title function_">ref</span>(<span class="string">&#x27;梅赛德斯奔驰&#x27;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">let</span> toy = <span class="title function_">ref</span>(<span class="string">&#x27;&#x27;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="comment">// 方法</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">function</span> <span class="title function_">getToy</span>(<span class="params">value:string</span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		toy.<span class="property">value</span> = value</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p>一个子组件：<code>Child.vue</code></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;child&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>子组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">		<span class="tag">&lt;<span class="name">h4</span>&gt;</span>玩具：&#123;&#123; toy &#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">		<span class="tag">&lt;<span class="name">h4</span>&gt;</span>父给的车：&#123;&#123; car &#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">		<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;sendToy(toy)&quot;</span>&gt;</span>把玩具给父亲<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span> <span class="attr">name</span>=<span class="string">&quot;Child&quot;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="comment">// 数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">let</span> toy = <span class="title function_">ref</span>(<span class="string">&#x27;奥特曼&#x27;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="comment">// 声明接收props</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="title function_">defineProps</span>([<span class="string">&#x27;car&#x27;</span>,<span class="string">&#x27;sendToy&#x27;</span>])</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p>父组件传给子组件，通过在子组件<code>:car=&#39;car&#39;</code>，子组件通过<code>defineProps</code>拿到<code>&#39;car&#39;</code></p>
<p>子组件传给父组件，在子组件的按钮上写上父组件传的<code>sendToy</code>函数，父组件使用<code>getToy</code>方法获取的值</p>
<blockquote>
<p>注意：props适合父子组件，如果组件嵌套过深不适合使用</p>
</blockquote>
<h4 id="【自定义事件】"><a href="#【自定义事件】" class="headerlink" title="【自定义事件】"></a>【自定义事件】</h4><p>自定义事件专门用于：<code>子-&gt;父</code></p>
<p>在父组件中，给子组件添加自定义事件：<code>@自定义事件</code>，并且在子组件使用<code>defineEmits()</code>,使用<code>emit</code>去接收</p>
<p>父组件：<code>Father.vue</code></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>父组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">		<span class="tag">&lt;<span class="name">h4</span> <span class="attr">v-show</span>=<span class="string">&quot;toy&quot;</span>&gt;</span>子给的玩具：&#123;&#123; toy &#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">		<span class="comment">&lt;!-- 给子组件Child绑定事件 --&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">Child</span> @<span class="attr">send-toy</span>=<span class="string">&quot;saveToy&quot;</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span> <span class="attr">name</span>=<span class="string">&quot;Father&quot;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">import</span> <span class="title class_">Child</span> <span class="keyword">from</span> <span class="string">&#x27;./Child.vue&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">import</span> &#123; ref &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="comment">// 数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">let</span> toy = <span class="title function_">ref</span>(<span class="string">&#x27;&#x27;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="comment">// 用于保存传递过来的玩具</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">function</span> <span class="title function_">saveToy</span>(<span class="params">value:string</span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;saveToy&#x27;</span>,value)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		toy.<span class="property">value</span> = value</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p>子组件：<code>Child.vue</code></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;child&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>子组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">		<span class="tag">&lt;<span class="name">h4</span>&gt;</span>玩具：&#123;&#123; toy &#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">		<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;emit(&#x27;send-toy&#x27;,toy)&quot;</span>&gt;</span>测试<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span> <span class="attr">name</span>=<span class="string">&quot;Child&quot;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">import</span> &#123; ref &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="comment">// 数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">let</span> toy = <span class="title function_">ref</span>(<span class="string">&#x27;奥特曼&#x27;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="comment">// 声明事件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">const</span> emit =  <span class="title function_">defineEmits</span>([<span class="string">&#x27;send-toy&#x27;</span>])</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<h4 id="【mitt】"><a href="#【mitt】" class="headerlink" title="【mitt】"></a>【mitt】</h4><h2 id="Uni-App"><a href="#Uni-App" class="headerlink" title="Uni-App"></a>Uni-App</h2><p>编写Uni-App，推荐使用官方的IDE：<a target="_blank" rel="noopener" href="https://dcloud.io/hbuilderx.html">HBuilderX</a>，编写微信小程序，还需要下载微信开发者工具：<a target="_blank" rel="noopener" href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html">微信开发者工具</a></p>
<h3 id="引入插件"><a href="#引入插件" class="headerlink" title="引入插件"></a>引入插件</h3><p>DCloud有活跃的插件市场，<a target="_blank" rel="noopener" href="https://ext.dcloud.net.cn/">https://ext.dcloud.net.cn</a>，并提供了变现、评价等机制。</p>
<p>DCloud插件市场将插件分为前端组件、JS SDK、uni-app前端模板、App原生插件、uniCloud等7大类、20多个子类。</p>
<p>比如安装<code>uni-ui</code>：<a target="_blank" rel="noopener" href="https://ext.dcloud.net.cn/plugin?id=55">uni-ui</a>，点击下载插件并导入HBuilderX</p>
<p><img src="/../images/202311061558521.png" alt="1699257514785"></p>
<h3 id="云存储"><a href="#云存储" class="headerlink" title="云存储"></a>云存储</h3><p>云存储的上传方式有3种：</p>
<ol>
<li><p>web界面：即在<a target="_blank" rel="noopener" href="https://unicloud.dcloud.net.cn/">https://unicloud.dcloud.net.cn</a> web控制台，点击云存储，通过web界面进行文件上传。该管理界面同时提供了资源浏览、删除等操作界面。</p>
</li>
<li><p>客户端API或组件上传：在前端js中编写<code>uniCloud.uploadFile</code>，或者使用uni ui的<a target="_blank" rel="noopener" href="https://ext.dcloud.net.cn/plugin?id=4079">FilePicker组件</a>，文件选择+上传均封装完毕。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;uni-file-picker v-model=&quot;imageValue&quot; fileMediatype=&quot;image&quot; mode=&quot;grid&quot; @select=&quot;select&quot; @progress=&quot;progress&quot;</span><br><span class="line">@success=&quot;success&quot; @fail=&quot;fail&quot; ref=&quot;files&quot; /&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>云函数上传文件到云存储：即在云函数js中编写<code>uniCloud.uploadFile</code></p>
</li>
</ol>
<p><strong>使用云函数js编写：</strong></p>
<p>自定义上传页面</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;view class=&quot;file&quot;&gt;</span><br><span class="line">		&lt;view class=&quot;uploadGroup&quot;&gt;</span><br><span class="line">			&lt;view class=&quot;box&quot; v-for=&quot;(item, index) in temFiles&quot; :key=&quot;index&quot;&gt;</span><br><span class="line">				&lt;image :src=&quot;item&quot; mode=&quot;aspectFill&quot;&gt;&lt;/image&gt;</span><br><span class="line">				&lt;view class=&quot;close&quot; @click=&quot;onClose(index)&quot;&gt;×&lt;/view&gt;</span><br><span class="line">			&lt;/view&gt;</span><br><span class="line">			&lt;view class=&quot;box add&quot; @click=&quot;addFile&quot; v-show=&quot;temFiles.length&lt;maxSize&quot;&gt;+&lt;/view&gt;</span><br><span class="line">		&lt;/view&gt;</span><br><span class="line"></span><br><span class="line">	&lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">	export default &#123;</span><br><span class="line">		data() &#123;</span><br><span class="line">			return &#123;</span><br><span class="line">				temFiles: [],</span><br><span class="line">				maxSize: 9</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		onLoad() &#123;&#125;,</span><br><span class="line">		methods: &#123;</span><br><span class="line">			addFile() &#123;</span><br><span class="line">				uni.chooseImage(&#123;</span><br><span class="line">					success: res =&gt; &#123;</span><br><span class="line">						this.temFiles = [...this.temFiles, ...res.tempFilePaths].slice(0, this.maxSize);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;)</span><br><span class="line">			&#125;,</span><br><span class="line">			onClose(e) &#123;</span><br><span class="line">				this.temFiles.splice(e, 1);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style lang=&quot;scss&quot; scoped&gt;</span><br><span class="line">	.uploadGroup &#123;</span><br><span class="line">		padding: 30rpx;</span><br><span class="line">		display: flex;</span><br><span class="line">		flex-wrap: wrap;</span><br><span class="line"></span><br><span class="line">		.box &#123;</span><br><span class="line">			margin-left: 15rpx;</span><br><span class="line">			margin-bottom: 15rpx;</span><br><span class="line">			width: 200rpx;</span><br><span class="line">			height: 200rpx;</span><br><span class="line">			background: #eee;</span><br><span class="line">			position: relative;</span><br><span class="line"></span><br><span class="line">			image &#123;</span><br><span class="line">				width: 100%;</span><br><span class="line">				height: 100%;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			.close &#123;</span><br><span class="line">				position: absolute;</span><br><span class="line">				right: 0;</span><br><span class="line">				top: 0;</span><br><span class="line">				width: 50rpx;</span><br><span class="line">				height: 50rpx;</span><br><span class="line">				background: rgba(0, 0, 0, 0.7);</span><br><span class="line">				color: #fff;</span><br><span class="line">				border-radius: 0 0 0 80rpx;</span><br><span class="line">				display: flex;</span><br><span class="line">				align-items: center;</span><br><span class="line">				justify-content: center;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line"></span><br><span class="line">		.add &#123;</span><br><span class="line">			font-size: 80rpx;</span><br><span class="line">			display: flex;</span><br><span class="line">			align-items: center;</span><br><span class="line">			justify-content: center;</span><br><span class="line">			color: #999;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>下面是效果图：</p>
<p><img src="/../images/202311071025948.png" alt="image-20231107102531845"></p>
<h3 id="页面间传值"><a href="#页面间传值" class="headerlink" title="页面间传值"></a>页面间传值</h3><p>例如我们从<strong>A页</strong>&#x3D;&gt;<strong>B页</strong>：</p>
<p>在A页中的跳转时，将参数拼接上：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">clickItem(id) &#123;</span><br><span class="line">    uni.navigateTo(&#123;</span><br><span class="line">        url: &quot;/pages/B/B?id=&quot; + id,</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>此时点击跳转的链接就变为了(<a target="_blank" rel="noopener" href="http://localhost:5173/#/pages/B/B?id=1">http://localhost:5173/#/pages/B/B?id=1</a>)</p>
<p>当我们在B页面要接收时，直接使用<code>onLOad</code>去接收</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">onLoad(id) &#123;</span><br><span class="line">    console.log(id);</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>此时，A页面就将id转给了B页面。</p>
<h3 id="各种事件"><a href="#各种事件" class="headerlink" title="各种事件"></a>各种事件</h3><h4 id="下拉刷新"><a href="#下拉刷新" class="headerlink" title="下拉刷新"></a>下拉刷新</h4><p>当用户下拉刷新时触发，示例：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">onPullDownRefresh() &#123;</span><br><span class="line">	this.listArr = [];</span><br><span class="line">	this.getData();</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>下拉刷新时，重新获取数据，但是刷新的动画不会消失，所以可以在数据完后后使用<code>uni.stopPullDownRefresh()</code>结束刷新的动画。</p>
<h4 id="触底事件"><a href="#触底事件" class="headerlink" title="触底事件"></a>触底事件</h4><p>当用户滑倒到页面底部时触发，示例：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">// 触底</span><br><span class="line">onReachBottom() &#123;</span><br><span class="line">	this.getData();</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">methods: &#123;</span><br><span class="line">    getData() &#123;</span><br><span class="line">        uniCloud.callFunction(&#123;</span><br><span class="line">            name: &quot;art_get_all&quot;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                skip: this.listArr.length</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;).then(res =&gt; &#123;</span><br><span class="line">            let oldList = this.listArr;</span><br><span class="line">            this.listArr = [...oldList, ...res.result.data]</span><br><span class="line">            uni.stopPullDownRefresh()</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>此处在下拉时，请求数据，并且根据已经加载的数据，获取新的数据，所以采用：<code>this.listArr.length</code>，去分页查询新的数据，下面是与函数的查询：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> db = uniCloud.<span class="title function_">database</span>();</span><br><span class="line"><span class="built_in">exports</span>.<span class="property">main</span> = <span class="title function_">async</span> (event, context) =&gt; &#123;</span><br><span class="line">	<span class="keyword">let</span> &#123;</span><br><span class="line">		skip = <span class="number">0</span></span><br><span class="line">	&#125; = event;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">await</span> db.<span class="title function_">collection</span>(<span class="string">&quot;article&quot;</span>).<span class="title function_">limit</span>(<span class="number">8</span>).<span class="title function_">skip</span>(skip).<span class="title function_">orderBy</span>(<span class="string">&quot;time&quot;</span>, <span class="string">&quot;desc&quot;</span>).<span class="title function_">get</span>(); <span class="comment">// 每次传递8条，时间倒序</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>



<h2 id="Uni-App-TS"><a href="#Uni-App-TS" class="headerlink" title="Uni-App-TS"></a>Uni-App-TS</h2><h3 id="创建项目"><a href="#创建项目" class="headerlink" title="创建项目"></a>创建项目</h3><p>使用<strong>命令行</strong>创建uni-app-vue3-ts版：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx degit dcloudio/uni-preset-vue#vite-ts 项目名</span><br></pre></td></tr></table></figure>

<p>进入项目后，进行安装依赖：<code>npm i</code>，启动可按<code>package.json</code>文件中的<code>scripts</code>启动命令</p>
<h3 id="用VS-Code开发"><a href="#用VS-Code开发" class="headerlink" title="用VS Code开发"></a>用VS Code开发</h3><h4 id="安装uni-app-插件"><a href="#安装uni-app-插件" class="headerlink" title="安装uni-app 插件"></a>安装uni-app 插件</h4><ul>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=mrmaoddxxaa.create-uniapp-view">uni-create-view</a> ：快速创建 uni-app 页面</li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=uni-helper.uni-helper-vscode">uni-helper</a> ：uni-app 代码提示</li>
<li><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=evils.uniapp-vscode">uniapp 小程序扩展</a> ：鼠标悬停查文档</li>
</ul>
<h4 id="TS类型校验"><a href="#TS类型校验" class="headerlink" title="TS类型校验"></a>TS类型校验</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types</span><br></pre></td></tr></table></figure>

<p>配置<code>tsconfig.json</code>，可参考：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// tsconfig.json</span></span><br><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;extends&quot;</span><span class="punctuation">:</span> <span class="string">&quot;@vue/tsconfig/tsconfig.json&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;compilerOptions&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;sourceMap&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;baseUrl&quot;</span><span class="punctuation">:</span> <span class="string">&quot;.&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;paths&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;@/*&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;./src/*&quot;</span><span class="punctuation">]</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;lib&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;esnext&quot;</span><span class="punctuation">,</span> <span class="string">&quot;dom&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">    <span class="comment">// 类型声明文件</span></span><br><span class="line">    <span class="attr">&quot;types&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">      <span class="string">&quot;@dcloudio/types&quot;</span><span class="punctuation">,</span> <span class="comment">// uni-app API 类型</span></span><br><span class="line">      <span class="string">&quot;miniprogram-api-typings&quot;</span><span class="punctuation">,</span> <span class="comment">// 原生微信小程序类型</span></span><br><span class="line">      <span class="string">&quot;@uni-helper/uni-app-types&quot;</span> <span class="comment">// uni-app 组件类型</span></span><br><span class="line">    <span class="punctuation">]</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="comment">// vue 编译器类型，校验标签类型</span></span><br><span class="line">  <span class="attr">&quot;vueCompilerOptions&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="comment">// 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`</span></span><br><span class="line">    <span class="attr">&quot;nativeTags&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;block&quot;</span><span class="punctuation">,</span> <span class="string">&quot;component&quot;</span><span class="punctuation">,</span> <span class="string">&quot;template&quot;</span><span class="punctuation">,</span> <span class="string">&quot;slot&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span> </span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;include&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;src/**/*.ts&quot;</span><span class="punctuation">,</span> <span class="string">&quot;src/**/*.d.ts&quot;</span><span class="punctuation">,</span> <span class="string">&quot;src/**/*.tsx&quot;</span><span class="punctuation">,</span> <span class="string">&quot;src/**/*.vue&quot;</span><span class="punctuation">]</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h4 id="JSON-注释问题"><a href="#JSON-注释问题" class="headerlink" title="JSON 注释问题"></a>JSON 注释问题</h4><p>在VScode中，严格要求json格式，在json中会爆红，只需要我们设置文件关联，把 <code>manifest.json</code> 和 <code>pages.json</code> 设置为 <code>jsonc</code></p>
<p>设置 &#x3D;》搜索文件关联 &#x3D;》Files: Associations &#x3D;》添加项</p>
<p><img src="/../images/202406170257129.png" alt="image-20240617025717041"></p>
<h3 id="安装uni-ui组件库"><a href="#安装uni-ui组件库" class="headerlink" title="安装uni-ui组件库"></a>安装uni-ui组件库</h3><p>采用npm方式进行安装，在 <code>vue-cli</code> 项目中可以使用 <code>npm</code> 安装 <code>uni-ui</code> 库</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i @dcloudio/uni-ui</span><br></pre></td></tr></table></figure>

<p><strong>配置easycom</strong></p>
<p>使用 <code>npm</code> 安装好 <code>uni-ui</code> 之后，需要配置 <code>easycom</code> 规则，让 <code>npm</code> 安装的组件支持 <code>easycom</code></p>
<p>打开项目根目录下的 <code>pages.json</code> 并添加 <code>easycom</code> 节点：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// pages.json</span></span><br><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">	<span class="attr">&quot;easycom&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">		<span class="attr">&quot;autoscan&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">		<span class="attr">&quot;custom&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">			<span class="comment">// uni-ui 规则如下配置</span></span><br><span class="line">			<span class="attr">&quot;^uni-(.*)&quot;</span><span class="punctuation">:</span> <span class="string">&quot;@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue&quot;</span></span><br><span class="line">		<span class="punctuation">&#125;</span></span><br><span class="line">	<span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">	</span><br><span class="line">	<span class="comment">// 其他内容</span></span><br><span class="line">	pages<span class="punctuation">:</span><span class="punctuation">[</span></span><br><span class="line">		<span class="comment">// ...</span></span><br><span class="line">	<span class="punctuation">]</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<p>当我们使用ts时，需要对uni-ui声明组件类型，安装<code>@uni-helper/uni-ui-types</code></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -D @uni-helper/uni-ui-types</span><br></pre></td></tr></table></figure>

<p>并且在项目根目录的<code>tsconfig.json</code>添加类型, <strong>compilerOptions</strong> -&gt; <strong>types</strong>：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;types&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">    <span class="string">&quot;@dcloudio/types&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="string">&quot;miniprogram-api-typings&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="string">&quot;@uni-helper/uni-app-types&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="string">&quot;@uni-helper/uni-ui-types&quot;</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure>



<h2 id="微信小程序登录"><a href="#微信小程序登录" class="headerlink" title="微信小程序登录"></a>微信小程序登录</h2><p>微信小程序扫码登录流程-<strong>官方时序图</strong></p>
<p><img src="/../images/202407212253830.jpeg" alt="image-202407212253830"></p>
<p>流程为：</p>
<ol>
<li>前端调用wx.login()获取code值，发给后端</li>
<li>后端将code,appId，appSecret作为参数调用微信接口 <em>code2Session</em></li>
<li>后端通过调用微信接口返回的openId，session_key(用于解析用户信息)</li>
<li>后端根据微信接口返回的openId查询是否存在用户信息</li>
<li>存在则返回用户信息+token，不存在则注册用户返回openId用于前端请求用户保存用户信息</li>
</ol>
<p><strong>第一步：</strong><br>引入依赖：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 微信小程序 --&gt;</span><br><span class="line">&lt;dependency&gt;</span><br><span class="line">    &lt;groupId&gt;com.github.binarywang&lt;/groupId&gt;</span><br><span class="line">    &lt;artifactId&gt;weixin-java-miniapp&lt;/artifactId&gt;</span><br><span class="line">    &lt;version&gt;<span class="number">4.1</span><span class="number">.0</span>&lt;/version&gt;</span><br><span class="line">&lt;/dependency&gt;</span><br></pre></td></tr></table></figure>

<p>在<code>application.yml</code>文件中，配置：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">wx:</span></span><br><span class="line">  <span class="attr">miniapp:</span></span><br><span class="line">    <span class="attr">appId:</span> <span class="string">xxxxxxxxxxxxxxxxxx</span></span><br><span class="line">    <span class="attr">secret:</span> <span class="string">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span></span><br><span class="line">    <span class="attr">msgDataFormat:</span> <span class="string">JSON</span></span><br></pre></td></tr></table></figure>

<p>创建配置文件类<code>WxConfigProperties.java</code>，读取配置内容：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@Component</span></span><br><span class="line"><span class="meta">@Data</span></span><br><span class="line"><span class="meta">@ConfigurationProperties(prefix = &quot;wx.miniapp&quot;)</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">WxConfigProperties</span> &#123;</span><br><span class="line">	<span class="keyword">private</span> String appId;</span><br><span class="line">	<span class="keyword">private</span> String secret;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>创建微信工具包对象<code>WxConfigOperator.java</code></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@Component</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">WxConfigOperator</span> &#123;</span><br><span class="line">	</span><br><span class="line">	<span class="meta">@Resource</span></span><br><span class="line">	<span class="keyword">private</span> WxConfigProperties wxConfigProperties;</span><br><span class="line">	</span><br><span class="line">	<span class="meta">@Bean</span></span><br><span class="line">	<span class="keyword">public</span> WxMaService <span class="title function_">wxMaService</span><span class="params">()</span> &#123;</span><br><span class="line">		<span class="comment">// 小程序 id和密钥</span></span><br><span class="line">		<span class="type">WxMaDefaultConfigImpl</span> <span class="variable">wxMaConfig</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">WxMaDefaultConfigImpl</span>();</span><br><span class="line">		wxMaConfig.setAppid(wxConfigProperties.getAppId());</span><br><span class="line">		wxMaConfig.setSecret(wxConfigProperties.getSecret());</span><br><span class="line">		</span><br><span class="line">		<span class="type">WxMaService</span> <span class="variable">service</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">WxMaServiceImpl</span>();</span><br><span class="line">		service.setWxMaConfig(wxMaConfig);</span><br><span class="line">		<span class="keyword">return</span> service;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p>通过wx.login（微信前端–小程序）接口获取code，将code传到后端，后端调用<code>https://api.weixin.qq.com/sns/jscode2session?appid=APPID&amp;secret=SECRET&amp;js_code=JSCODE&amp;grant_type=authorization_code</code></p>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/Vue/" rel="tag"># Vue</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2023/10/16/nodejs%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86%E5%99%A8/" rel="prev" title="nodejs版本管理器">
                  <i class="fa fa-angle-left"></i> nodejs版本管理器
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2023/11/15/GitBook/" rel="next" title="基于GitBook搭建个人博客">
                  基于GitBook搭建个人博客 <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 
    <span itemprop="copyrightYear">2025</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">Phils</span>
  </div>

    </div>
  </footer>

  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>
  <div class="sidebar-dimmer"></div>
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>

</body>
</html>
